<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Diboot 开发助理 专业版</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Diboot轻代码开发平台" name="keywords" />
    <meta content="高质量、高效率、智能化的软件开发平台" name="description" />
    <meta content="苏州帝博信息技术有限公司 - www.dibo.ltd" name="author" />
    <link href="https://devtools.diboot.com/cdn/v1/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/adminlte.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/datepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="https://devtools.diboot.com/cdn/v1/pace.min.css" rel="stylesheet" />
    <link rel="shortcut icon" href="https://www.diboot.com/favicon.ico" />
    <style>.toast-top-center {top: 80px !important;right: 0;width: 100% } section.content {padding: 8px;border-radius: 0;border-top-width: 1px;margin-bottom: 10px;} section.content .box {padding: 5px;margin-bottom: 10px;} section.content .box-title {font-size: 14px;} section.content .box-body {padding: 4px 6px;} .col-md-10 .table, .table-responsive .table {margin-bottom: 5px;} section.content .btn-app.primary {background-color: #F0FFFF;} section.content .btn-app.primary:hover {color: #fff;background-color: #008d4c;} .box-header {padding: 8px;} section.content .btn-reset {height: 30px;padding: 5px;font-size: 12px;} .col-md-1 {padding: 0 5px;} .form-control {padding: 4px;min-width: 120px;} label {font-weight: 500;} select.custom {width: 80px;height: 34px;border: 1px solid #E1E1E1;} select.form-control {border-color: #E1E1E1;} input[type="checkbox"] {width: 15px;height: 15px;} .checkbox {margin-top: 2px;margin-bottom: 6px;} input.form-input {margin-top: 9px;padding-left: 4px;padding-right: 4px;} td div.row {margin-left: 0;margin-right: 0;padding: 4px 2px;border-bottom: 1px dashed #e0e0e0;} .table-striped > tbody > tr:nth-of-type(2n) {background-color: #f2feff;} .sub-options label {width: 50px;} .table > tbody > tr > td.valign-center {font-weight: 600;vertical-align: center;} .table > tbody > tr > td label.valign-center {padding-top: 6px;} .table > tbody > tr > td {padding: 2px 6px;} .selected{background-color: #cfe8ff !important;} .disabled{color: #777;} .btn-link{outline: none !important;} .border-top{padding-top: 15px !important;border-top: solid 1px #eee;} .div-columnBox{position: relative;} .div-columnBody-modal{width:100%;max-height: 200px;overflow: auto;padding: 4px 8px;position:absolute;z-index:101;background-color: #f6faec;} </style>
</head>
<body class="hold-transition skin-green sidebar-collapse sidebar-mini">
<div class="wrapper">
    <header class="main-header">
        <a href="https://www.diboot.com" target="_blank" class="logo"><span class="logo-mini"><b>D</b>ibo</span><span class="logo-lg"><b>D</b>iboot 开发助理</span></a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
        </nav>
    </header>
    <aside class="main-sidebar">
        <section class="sidebar">
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">开发工具</li>
                <li><a href="/demo/maintain/table.html"><i class="fa fa-database"></i> <span>管理 数据库表</span></a></li>
                <li><a href="/demo/maintain/sql.html"><i class="fa fa-bolt"></i> <span>执行 SQL语句</span></a></li>
                <li><a href="/demo/generate/crud.html"><i class="fa fa-cube"></i><span>生成 CRUD功能</span></a></li>
                <li><a href="/demo/generate/import.html"><i class="fa fa-upload"></i> <span>生成 Excel导入功能</span></a></li>
                <li><a href="/demo/generate/export.html"><i class="fa fa-download"></i><span>生成 导出到Excel功能</span></a></li>
                <li class="active"><a href="/demo/generate/report.html"><i class="fa fa-bar-chart"></i> <span>生成 统计图表功能</span></a></li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper" id="app3">
        <section class="content">
            <div class="box">
                <div class="box-header with-border">
                    <h5 class="box-title" style="font-size:16px"><i class="fa fa-cube"></i> 生成 统计图表功能 <small>(上方区域配置功能选项, 下方区域预览生成效果)</small></h5>
                    <div class="box-tools pull-right" style="top:2px">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 收起/展开 </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-10" style="padding-right: 0">
                            <table class="table table-striped">
                                <tbody>
                                <tr>
                                    <td width="90px" class="valign-center"><label class="valign-center"><b>动态SQL</b></label></td>
                                    <td>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <textarea name="dynamicSql" style="width: 100%;min-height: 10rem;padding: 4px 10px;outline: none" @blur="searchSQL" v-model="config.dynamicSql" placeholder="输入查询SQL，如: SELECT gender '性别', count(*) '数量' FROM student WHERE gender=#{gender} GROUP BY gender"></textarea>
                                            </div>
                                        </div></td>
                                </tr>
                                <tr>
                                    <td><label class="valign-center"><b>配置图表</b></label></td>
                                    <td>
                                        <div class="row">
                                            <div class="col-md-8" style="padding: 0">
                                                <button type="button" class="btn btn-link btn-sm" :class="{selected: config.chartType == 'table',disabled: canChoiceType.indexOf('table') == -1}" @click="choiceType('table')" :disabled="canChoiceType.indexOf('table') == -1"><i class="fa fa-table"></i> 数据列表</button>
                                                <button type="button" class="btn btn-link btn-sm" :class="{selected: config.chartType == 'bar',disabled: canChoiceType.indexOf('bar') == -1}" @click="choiceType('bar')" :disabled="canChoiceType.indexOf('bar') == -1"><i class="fa fa-bar-chart"></i> 柱状图</button>
                                                <button type="button" class="btn btn-link btn-sm" :class="{selected: config.chartType == 'line',disabled: canChoiceType.indexOf('line') == -1}" @click="choiceType('line')" :disabled="canChoiceType.indexOf('line') == -1"><i class="fa fa-line-chart"></i> 折线图</button>
                                                <button type="button" class="btn btn-link btn-sm" :class="{selected: config.chartType == 'pie',disabled: canChoiceType.indexOf('pie') == -1}" @click="choiceType('pie')" :disabled="canChoiceType.indexOf('pie') == -1"><i class="fa fa-pie-chart"></i> 饼状图</button>
                                                <button type="button" class="btn btn-link btn-sm" :class="{selected: config.chartType == 'funnel',disabled: canChoiceType.indexOf('funnel') == -1}" @click="choiceType('funnel')" :disabled="canChoiceType.indexOf('funnel') == -1"><i class="fa fa-sort-amount-desc"></i> 漏斗图</button>
                                                <button type="button" class="btn btn-link btn-sm" :class="{selected: config.chartType == 'gauge',disabled: canChoiceType.indexOf('gauge') == -1}" @click="choiceType('gauge')" :disabled="canChoiceType.indexOf('gauge') == -1"><i class="fa fa-dashboard"></i> 仪表盘</button>
                                            </div>
                                            <div class="col-md-2" style="padding: 0">
                                                <input placeholder="图表名称" v-model="config.chartTitle" class="form-control" type="text" />
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" class="form-control" v-model="config.codeFileName" placeholder="图表对象/方法名" />
                                            </div>
                                        </div></td>
                                </tr>
                                <tr>
                                    <td><label class="valign-center"><b>展现方式</b></label></td>
                                    <td>
                                        <div class="row">
                                            <div class="col-md-2" style="padding-left: 0">
                                                <select class="form-control" v-model="selectMenuType"><option value="superior">新报表页(新菜单)</option><option value="existing">插入已有报表页</option></select>
                                            </div>
                                            <div class="col-md-2" v-if="selectMenuType == 'superior'">
                                                <select name="menuParentId" class="form-control" v-model="config.menu.parentId"><option value="0">- 上级菜单 -</option><option v-for="menu in menus" :value="menu.id">{{ menu.name }}</option></select>
                                            </div>
                                            <label class="valign-center col-md-1" style="margin-left: -15px" v-if="selectMenuType == 'superior'"><button type="button" title="新建上级菜单" data-toggle="modal" data-target="#menuModal" class="btn btn-sm btn-default" style="padding:2px 6px"><i class="fa fa-plus"></i></button></label>
                                            <div class="col-md-2" v-if="selectMenuType == 'superior'">
                                                <input placeholder="菜单名称" v-model="config.menu.name" class="form-control" type="text" />
                                            </div>
                                            <div class="col-md-3" v-if="selectMenuType == 'superior'">
                                                <div class="input-group">
                                                    <input id="icon-id" placeholder="菜单图标 (fa fa-icon)" class="form-control" type="text" v-model="config.menu.icon" />
                                                    <span title="选择图标" class="input-group-addon" @click="showModal" style="cursor: pointer;">选择</span>
                                                </div>
                                            </div>
                                            <div class="col-md-3" v-if="selectMenuType == 'existing'">
                                                <select class="form-control" v-model="config.page"><option value="">- 选择报表页 -</option><option :disabled="!item.value" :value="item.value" v-for="item in ownsPages">{{item.name}}</option></select>
                                            </div>
                                        </div></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-2">
                            <a class="btn btn-app btn-reset" href="/generate/report">重置</a>
                            <br />
                            <br />
                            <button class="btn btn-app primary" @click="formSubmit"><i class="fa fa-arrow-circle-right"></i> 生成 </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="iconModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header" style="padding: 8px 15px">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">选择图标</h4>
                        </div>
                        <div class="modal-body" style="height: 500px;overflow: auto; padding:0px 15px 5px 15px">
                            <h5>Web应用图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in webicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>手势图标1</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in handicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>交通图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in trafficicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>性别图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in sexicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>文件图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in fileicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>旋转图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in xicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>支付图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in payicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>图表图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in charticon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>表单图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in formicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>货币图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in moneyicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>文本编辑图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in editicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>定向图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in dicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>播放图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in playicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>品牌图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in brandicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>辅助图标</h5>
                            <div class="row text-center border-b">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in accessicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                            <h5>医疗图标</h5>
                            <div class="row text-center" style="margin-bottom: 15px">
                                <div class="col-md-1" data-dismiss="modal" :title="list | filterStr" v-for="list in medicalicon">
                                    <i :class="list" @click="getClass(list)" style="cursor: pointer"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box box-primary">
                <div class="box-header with-border">
                    <i class="fa fa-list"></i>
                    <h3 class="box-title"><span v-if="config.chartTitle">{{ config.chartTitle }}</span><span v-else="">图表预览区</span></h3>
                </div>
                <div class="box-body">
                    <form class="form-horizontal" action="" method="post">
                        <div v-for="(row, rowIdx) in previewQueryList" class="form-group" style="margin-top: 10px">
                            <div v-for="(col, index) in row">
                                <label class="col-md-1 control-label" :class="rowIdx==0 &amp;&amp; index==0 &amp;&amp; row.length &lt; 6 ? 'col-md-offset-' + (5 - row.length - 1) : ''" v-if="col.type == 'label'">{{ col.value }}：</label>
                                <div class="col-md-2" v-if="col.type=='INPUT' || col.type=='DATETIME_PICKER'">
                                    <input type="text" class="form-control" :placeholder="'请输入' + col.value" />
                                </div>
                                <div class="col-md-2" v-if="col.type=='SELECT'">
                                    <select class="form-control"><option value="" v-text="'-请选择' + col.value + '-'"></option></select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button class="btn btn-primary btn-block" type="button"><i class="fa fa-search"></i> 查询数据 </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="box-body" :class="{'border-top': showView}">
                    <div id="main">
                        <table class="table table-hover table-bordered table-striped" v-if="ListShow">
                            <thead>
                            <tr style="background: #00a65a;color:#ffffff">
                                <th v-for="item in chartdataLabel">{{item}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in chartdataTbody">
                                <td v-for="list in item">{{list}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal fade in" id="menuModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">新建上级菜单</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">菜单名称 <span style="color: #f00">*</span></label>
                                    <div class="col-md-8">
                                        <input class="form-control" v-model="newMenu.name" placeholder="菜单名称" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">菜单图标 <span style="color: #f00">*</span></label>
                                    <div class="col-md-8">
                                        <div class="div-columnBox text-center" @mouseover="isShowMenuIcon = true" @mouseleave="isShowMenuIcon = false">
                                            <input type="text" readonly="" placeholder="菜单图标 (fa fa-icon)" class="form-control" v-model="newMenu.icon" />
                                            <div class="div-columnBody-modal" v-if="isShowMenuIcon">
                                                <div class="col-md-1" v-for="list in webicon">
                                                    <i :class="list" @click="getNewMenuIcon(list)" style="cursor: pointer"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <div class="col-md-10 col-md-offset-1">
                                <button type="button" class="btn btn-default pull-left" data-dismiss="modal"> 取 消</button>
                                <button type="button" class="btn btn-primary" :disabled="!newMenu.name || !newMenu.icon" @click="addNewMenu"> 确认添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/jquery.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/bootstrap.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/adminlte.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/toastr.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/echarts.min.js"></script>
<script src="https://devtools.diboot.com/cdn/v1/vue.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/datepicker.min.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/cdn/v1/pace.min.js"></script>
<script>var contextPath = "";</script>
<script type="text/javascript" src="/static/plugin/diboot/diboot.echarts.js"></script>
<script type="text/javascript" src="https://devtools.diboot.com/loader/js/1.6.0?f=web/js/templates.generate.report.js&amp;lcs=C4LqfUblTILA6G5cbjQmbaBFRbenzFJtb3FXKP5/gQyUbQzZKRkPKOMv%2BDnRxRYlj5MDY0RddZ%2BmiTrJ5GT%2BaUl7KPk8bgdv%2BDEI5O%2BbfG3A8beHVwQAM75gqKreYmhq"></script>
</body>
</html>